<template>
  <el-container direction="vertical">
    <el-main>
      <h1 style="text-align: center;margin-top: 40px;margin-bottom: 30px">🔥热销榜单</h1>
      <p style="text-align: center;margin-bottom: 40px">❤️最热门的都在这里❤️</p>
      <el-tabs type="border-card" @tab-click="show" v-model="select">
        <el-tab-pane name="食品">
          <span slot="label"><i class="el-icon-food"></i> 食品</span>
          <div class="row align-items-center" v-for="(items,index) in foods" :key="index">
            <div class="col-md-1 text-center">
              <h1 style="text-align: center" class="el-icon-medal">{{index+1}}</h1>
            </div>
            <div class="col-md-11">
              <Top :item="foods[index]"></Top>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="饮料">
          <span slot="label"><i class="el-icon-cold-drink"></i> 饮品</span>
          <div class="row align-items-center" v-for="(items,index) in drinks" :key="index">
            <div class="col-md-1 text-center">
              <h1 style="text-align: center" class="el-icon-medal">{{index+1}}</h1>
            </div>
            <div class="col-md-11">
              <Top :item="drinks[index]"></Top>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="生活用品">
          <span slot="label"><i class="el-icon-table-lamp"></i> 生活用品</span>
          <div class="row align-items-center" v-for="(items,index) in lifes" :key="index">
            <div class="col-md-1 text-center">
              <h1 style="text-align: center" class="el-icon-medal">{{index+1}}</h1>
            </div>
            <div class="col-md-11">
              <Top :item="lifes[index]"></Top>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="学习用品">
          <span slot="label"><i class="el-icon-paperclip"></i> 学习用品</span>
          <div class="row align-items-center" v-for="(items,index) in studys" :key="index">
            <div class="col-md-1 text-center">
              <h1 style="text-align: center" class="el-icon-medal">{{index+1}}</h1>
            </div>
            <div class="col-md-11">
              <Top :item="studys[index]"></Top>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
import Top from "../components/Top";
import Store from "../components/Store";
import axios from "axios";
export default {
  name: "Tops",
  components: {Store, Top},
  data(){
    return{
      foods:[],
      drinks:[],
      studys:[],
      lifes: [],
      stores:[],
      select:'食品'
    }
  },
  methods:{
    show(tab,event){
      if (tab.name === "食品") {
        axios.get('http://r44734h518.zicp.vip:41569/goods/getHotGoods?'+'gkind='+tab.name).then(res=>{
          this.foods = res.data;
        })
      } else if(tab.name === "饮料") {
        axios.get('http://r44734h518.zicp.vip:41569/goods/getHotGoods?'+'gkind='+tab.name).then(res=>{
          this.drinks = res.data;
        })
      } else if (tab.name === "生活用品") {
        axios.get('http://r44734h518.zicp.vip:41569/goods/getHotGoods?'+'gkind='+tab.name).then(res=>{
          this.lifes = res.data;
        })
      } else if (tab.name === "学习用品") {
        axios.get('http://r44734h518.zicp.vip:41569/goods/getHotGoods?'+'gkind='+tab.name).then(res=>{
          this.studys = res.data;
        })
      }
    }
  },
  created() {
    axios.get('http://r44734h518.zicp.vip:41569/goods/getHotGoods?'+'gkind='+"食品").then(res=>{
      this.foods = res.data;
    })
  }
}
</script>

<style scoped>

</style>
